<script>
import echarts from 'echarts'
import 'echarts-gl'
import GeomJson from '../assets/geom/dujiangyan2.json'
import MapLocationIcon from '../assets/images/position-icon.png'
import MapDoubleLower from '../assets/images/double-icon-lower.png'
import { geomData, splitList } from '../assets/geom/data'
import resize from '../mixins/resize'
import { getClueAmountOverviewGroupByOrg } from '@/api/clue'
import { getFilingAmountOverviewGroupByOrg } from '@/api/filing'
export default {
  mixins: [resize],
  props: {
    year: Number
  },
  data() {
    return {
      MapLocationIcon,
      MapDoubleLower,
      chart: null,
      chartData: {},
      splitListRes: [],
      geomDataRes: []
    }
  },
  watch: {
    year() {
      this.getData()
    }
  },
  mounted() {
    this.getData()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    async getData() {
      const params = this.getParams()
      const res1 = await getClueAmountOverviewGroupByOrg(params)
      const res2 = await getFilingAmountOverviewGroupByOrg(params)
      let total = 0
      const totalParams = {}

      res1.data.forEach((item) => {
        if (!this.chartData[item.name]) {
          this.chartData[item.name] = {}
        }
        this.chartData[item.name]['clue'] = item
        totalParams[item.name] = item.yearOverdueCount
        total = item.yearTotalCount + total
      })
      res2.data.forEach((item) => {
        if (!this.chartData[item.name]) {
          this.chartData[item.name] = {}
        }
        this.chartData[item.name]['filing'] = item
        totalParams[item.name] = totalParams[item.name] + item.yearOverdueCount
      })
      this.splitListRes = res1.data
        .sort((item, item1) => {
          return item1.yearTotalCount - item.yearTotalCount
        })
        .map((item, index) => {
          const name = item.name.replace('纪委', '').replace('纪工委', '')
          const num = totalParams[item.name] || 0
          const getColor = (value) => {
            if (!value || value == 0) return '#67C23A'
            if (value <= 5) return '#fac858'
            if (value > 5) return '#ee6666'
            return '#fac858'
          }

          return {
            start: index + 1,
            end: index + 1,
            label: name,
            color: getColor(num)
          }
        })
      this.geomDataRes = this.splitListRes.map((item, index) => {
        return {
          name: item.label,
          value: item.start
        }
      })
      this.initChart()
    },
    getParams() {
      const params = {
        startDate: `${this.year}-01-01`,
        endDate: `${this.year}-12-31`
      }
      return params
    },
    initChart() {
      this.chart = echarts.init(document.getElementById('big-screen-map'))
      echarts.registerMap('都江堰', GeomJson)
      const option = {
        backgroundColor: '#062343',
        tooltip: {
          show: true,
          padding: 0,
          triggerOn: 'mousemove',
          formatter: (params) => {
            let paramsData = {
              clue: {},
              filing: {}
            }
            Object.keys(this.chartData).forEach((key) => {
              if (key.includes(params.name)) {
                paramsData = this.chartData[key]
              }
            })
            return `<div class="amap-info-window-region">
            <div class="amap-info-window-title">
              <img src="${this.MapLocationIcon}"/>
              <div>${params.name}</div>
            </div>
            <div class="amap-info-window-content">
                <div class="amap-info-window-item">
                  <div class="amap-info-window-circle"></div>
                  <div class="amap-info-window-name">提供线索总数</div>
                  <div class="amap-info-window-num">${
  paramsData.clue.yearTotalCount || 0
}</div>
                  <div class="amap-info-window-unit">条</div>
                </div>
                <div class="amap-info-window-item">
                  <div class="amap-info-window-circle"></div>
                  <div class="amap-info-window-name">今年线索总数</div>
                  <div class="amap-info-window-num">${
  paramsData.clue.yearTimelyCount || 0
}</div>
                  <div class="amap-info-window-unit">条</div>
                </div>
                <div class="amap-info-window-item">
                  <div class="amap-info-window-circle"></div>
                  <div class="amap-info-window-name">本月线索总数</div>
                  <div class="amap-info-window-num">${
  paramsData.clue.monthTotalCount || 0
}</div>
                  <div class="amap-info-window-unit">条</div>
                </div>
                <div class="amap-info-window-item">
                  <div class="amap-info-window-circle"></div>
                  <div class="amap-info-window-name">线索逾期总数</div>
                  <div class="amap-info-window-num">${
  paramsData.clue.yearOverdueCount || 0
}</div>
                  <div class="amap-info-window-unit">条</div>
                </div>
                <div class="amap-info-window-item">
                  <div class="amap-info-window-circle"></div>
                  <div class="amap-info-window-name">平台立案总数</div>
                  <div class="amap-info-window-num">${
  paramsData.filing.yearTotalCount || 0
}</div>
                  <div class="amap-info-window-unit">条</div>
                </div>
                <div class="amap-info-window-item">
                  <div class="amap-info-window-circle"></div>
                  <div class="amap-info-window-name">今年立案总数</div>
                  <div class="amap-info-window-num">${
  paramsData.filing.yearTimelyCount || 0
}</div>
                  <div class="amap-info-window-unit">条</div>
                </div>
                <div class="amap-info-window-item">
                  <div class="amap-info-window-circle"></div>
                  <div class="amap-info-window-name">本月立案总数</div>
                  <div class="amap-info-window-num">${
  paramsData.filing.monthTotalCount || 0
}</div>
                  <div class="amap-info-window-unit">条</div>
                </div>
                <div class="amap-info-window-item">
                  <div class="amap-info-window-circle"></div>
                  <div class="amap-info-window-name">立案处理逾期</div>
                  <div class="amap-info-window-num">${
  paramsData.filing.yearOverdueCount || 0
}</div>
                  <div class="amap-info-window-unit">条</div>
                </div>
            </div>
        </div>`
          }
        },
        series: [
          {
            // tooltip: {
            //   trigger: "item",
            // },
            name: '都江堰',
            type: 'map3D',
            map: '都江堰',
            boxDepth: 145, // 地图倾斜度
            regionHeight: 6, // 地图厚度
            label: {
              show: true, // 是否显示市
              textStyle: {
                color: '#fff', // 文字颜色
                fontSize: 12, // 文字大小
                fontFamily: '微软雅黑',
                backgroundColor: 'rgba(0,0,0,0)' // 透明度0清空文字背景
              }
            },
            itemStyle: {
              opacity: 1, // 透明度
              borderWidth: 1, // 分界线宽度
              borderColor: '#ffffff' // 分界线颜色
            },
            groundplane: {
              show: false
            },
            data: this.geomDataRes,
            // 真实感材质相关配置 shading: 'realistic'时有效
            realisticMaterial: {
              detailTexture: '#fff', // 纹理贴图
              textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
              roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
              metalness: 0, // 0材质是非金属 ，1金属
              roughnessAdjust: 0
            },
            viewControl: {
              distance: 185, // 地图视角 控制初始大小
              rotateSensitivity: 2, // 旋转
              zoomSensitivity: 1, // 缩放
              beta: 50
              // autoRotate: true,
            }
          }
        ],
        dataRange: {
          show: false,
          splitList: this.splitListRes
        },
        animation: true,
        animationDurationUpdate: 5000
      }
      this.chart.setOption(option)
      setTimeout(() => {
        this.$nextTick(() => {
          this.chart.resize()
        })
      }, 300)
    }
  }
}
</script>

<template>
  <div id="big-screen-map" />
</template>

<style lang="scss">
#big-screen-map {
  width: 100%;
  height: 100%;
}

.amap-info-window-region {
  width: 222px;
  // height: 209px;
  background: linear-gradient(0deg, #052120 0%, rgb(27 114 110 / 80%) 80%);
  // box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.4);
  // border-radius: 2px;
  padding: 20px 15px;
  position: relative;
}

.amap-info-window-arrow {
  position: absolute;
  bottom: -30px;
  width: 30px;
  height: 30px;
  left: 50%;
  transform: translate(-50%, 0);
}

.amap-info-window-title {
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.amap-info-window-title img {
  width: 18px;
  height: 18px;
  margin-right: 10px;
}

.amap-info-window-content {
  display: flex;
  flex-direction: column;
}

.amap-info-window-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  flex-wrap: nowrap;
}

.amap-info-window-circle {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #47e6de;
  margin-right: 10px;
  margin-left: 10px;
}

.amap-info-window-name {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  margin-right: 00px;
  width: 85px;
}

.amap-info-window-num {
  font-size: 18px;
  font-family: HarmonyOS Sans SC;
  font-weight: bold;
  color: #47e6de;
  margin-right: 5px;
  flex: 1;
  text-align: right;
}

.amap-info-window-unit {
  font-size: 16px;
  font-family: HarmonyOS Sans SC;
  font-weight: bold;
  color: #ffffff;
}
</style>
